<template>
  <div class="parent">
    <el-container>
      <el-header style="text-align: right; font-size: 12px">
        <div>
          <div id="shop">
            <i class="el-icon-s-home" style="margin-right: 15px">
              {{ userInfo.shopName }}</i>
          </div>
          <div id="user">
            <div id="userImageDiv">
              <el-avatar :src="this.userLogo" />
            </div>
            <div id="userInfoDiv">
              <span>{{ userInfo.username }}</span>
              <el-dropdown @command="handleCommand">
                <i class="el-icon-setting" style="margin-right: 15px" />
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item
                    command="personalData"
                  >个人资料</el-dropdown-item>
                  <el-dropdown-item
                    command="download"
                  >下载菜单二维码</el-dropdown-item>
                  <el-dropdown-item
                    command="loginOut"
                  >退出系统</el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </div>
          </div>
        </div>
      </el-header>
    </el-container>
    <el-container>
      <el-aside>
        <el-menu
          class="el-menu-vertical-demo"
          default-active="variety-of-dishes-manage"
          router
          :collapse="isCollapse"
        >
          <el-menu-item
            v-if="this.userInfo.username === '管理员'"
            index="/business-manage"
          >
            <i class="el-icon-location" />
            <span slot="title">商家管理</span>
          </el-menu-item>
          <el-menu-item index="/variety-of-dishes-type-manage">
            <i class="el-icon-menu" />
            <span slot="title">菜品类型管理</span>
          </el-menu-item>
          <el-menu-item index="/variety-of-dishes-manage">
            <i class="el-icon-menu" />
            <span slot="title">菜品管理</span>
          </el-menu-item>
        </el-menu>
      </el-aside>
      <el-main>
        <router-view />
      </el-main>
    </el-container>
  </div>
</template>

<script>
import axios from 'axios'
import sessionStorage from '../../assets/js/storage'
import { getWbeRoot, isMobile, getFileRoot } from '../../api/web-site'

export default {
  name: 'Index',

  data () {
    return {
      userId: '',
      roleName: '',
      defaultActive: '',

      userInfo: [
        {
          username: '',
          shopLogo: '',
          shopName: ''
        }
      ],

      /* 默认商家头像 */
      userLogo: ''
    }
  },
  computed: {
    isCollapse () {
      return isMobile()
    }
  },
  created () {
    this.userLogo =
      getFileRoot() + 'group1/M00/00/00/rBjjNmJ7gNqAQxhdAACIlcWsBL0087.png'
    this.userId = sessionStorage.getItem('usrId')
    this.roleName = sessionStorage.getItem('roleName')
    this.getUserInfo()
  },

  methods: {
    /* 获取当前用户信息 */
    getUserInfo () {
      axios
        .get(getWbeRoot() + '/api/sysUser/getUserById', {
          params: {
            userId: this.userId
          }
        })
        .then(response => {
          if (response.status === 200) {
            if (
              response.data.shopLogo !== '' &&
              response.data.shopLogo !== null
            ) {
              this.userLogo = getFileRoot() + response.data.shopLogo
            }
            this.userInfo = response.data
          }
        })
    },

    /* 下拉菜单操作事件 */
    handleCommand (command) {
      /* 商家个人资料 */
      if (command === 'personalData') {
        if (this.roleName === '管理员') {
          this.$message({
            message: '管理员信息不可修改',
            type: 'warning'
          })
        } else {
          this.$router.push({
            name: 'business-details',
            params: { id: this.userId, type: command }
          })
        }
      }

      /* 退出系统 */
      if (command === 'loginOut') {
        axios
          .get(getWbeRoot() + '/api/login/logOut', {
            params: {
              userId: this.userId
            }
          })
          .then(response => {
            if (response.data.code === '200') {
              this.$router.push('/')
            }
          })
      }

      /* 下载菜单二维码 */
      if (command === 'download') {
        if (this.roleName === '管理员') {
          this.$message({
            message: '管理员无需进行此操作',
            type: 'warning'
          })
        } else {
          if (
            sessionStorage.getItem('qrUrl') !== null &&
            sessionStorage.getItem('qrUrl') !== ''
          ) {
            window.open(getFileRoot() + sessionStorage.getItem('qrUrl'))
            // axios.get(getWbeRoot() + '/api/upload/download', {
            //   params: {
            //     filePath: sessionStorage.getItem("qrUrl"),
            //   }
            // })
          } else {
            this.$message({
              message: '请先在个人资料中生成二维码',
              type: 'warning'
            })
          }
        }
      }
    }
  }
}
</script>

<style scoped>
.el-header {
  background-color: #b3c0d1;
  color: #333;
  line-height: 60px;
}

.el-aside {
  color: #333;
  height: calc(100vh - 60px);
  width: 13% !important;
}
.el-menu {
  height: calc(100vh - 60px);
}
.content {
  height: 100%;
}
.el-dropdown {
  cursor: pointer;
}

#shop {
  float: left;
  font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB",
    "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
  font-size: 20px;
  margin-left: 50px;
}
#user {
  float: right;
}

#userImageDiv {
  float: left;
  margin: 10px;
}

#userInfoDiv {
  float: right;
  font-size: 15px;
}
</style>
